<script lang="ts" setup>
import { useRouter } from '@/router';
import { useLocale } from '@/locale/locale';
import { computed, onMounted, ref } from 'vue';
import { withdrawApply, withdrawInfo } from '@/api/user';
import { useUserStore } from '@/store/user';
import { round } from 'lodash-es';
import { isWechat } from '@/utils/platform';

const router = useRouter();
const { t } = useLocale();
const userStore = useUserStore();
const info = ref<any>({
  balance: 0,
  minWithdrawalAmount: 0,
  serviceCharge: 0,
  afterDay: 0
});
const money = ref<any>(null);

const disabled = computed(() => {
  return (
    !money.value ||
    parseFloat(money.value) < parseFloat(info.value.minWithdrawalAmount) ||
    parseFloat(money.value) > parseFloat(info.value.balance)
  );
});

const realMoney = computed(() => {
  if (disabled.value) {
    return 0;
  } else {
    return round(
      parseFloat(money.value) -
        round((parseFloat(money.value) * parseFloat(info.value.serviceCharge)) / 100, 2),
      2
    );
  }
});

function allWithdraw() {
  money.value = info.value.balance;
}

async function submitWithdraw() {
  if (disabled.value) {
    return false;
  }
  const payload: any = {
    ChannelId: 0,
    StaffId: 0,
    amount: money.value
  };
  if (userStore.user.rebateMode == 'STAFF') {
    payload.StaffId = userStore.user.staffId;
  } else {
    payload.ChannelId = userStore.user.channelId;
  }

  const res = await withdrawApply(payload);
  if (res.code == 0) {
    uni.navigateTo({
      url: '/pages/distribution/withdraw-result?result=success&money=' + money.value
    });
  } else {
    uni.navigateTo({
      url: '/pages/distribution/withdraw-result?result=fail'
    });
  }
}

async function getInfo() {
  const payload: any = {
    ChannelId: 0,
    StaffId: 0
  };
  if (userStore.user.rebateMode == 'STAFF') {
    payload.StaffId = userStore.user.staffId;
  } else {
    payload.ChannelId = userStore.user.channelId;
  }
  var res = await withdrawInfo(payload);
  if (res.code == 0) {
    info.value = res.data;
  }
}

onMounted(() => {
  getInfo();
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('LDKey_distributionWithdraw')"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  />
  <view class="withdraw-contain">
    <view class="withdraw-contain-balance">
      <text>{{ t('LDKey_distributionAccountBalance') }}</text>
      <text>¥{{ info.balance }}JPY</text>
    </view>
    <view class="withdraw-contain-view">
      <view class="withdraw-contain-view-title">
        {{ t('LDKey_distributionApplyWithdrawAmount') }}
      </view>
      <view class="withdraw-contain-view-input">
        <input
          v-model="money"
          :placeholder="t('LDKey_distributionApplyWithdrawAmountMax', { money: info.balance })"
          placeholder-class="placeholder"
          type="number"
        />
        <view @click="allWithdraw">{{ t('LDKey_distributionApplyWithdrawAll') }}</view>
      </view>
      <view class="withdraw-contain-view-bottom">
        <view>
          {{ t('LDKey_distributionApplyWithdrawAmountCan') }}
          <text>¥{{ realMoney }}JPY</text>
        </view>
        <view>
          {{
            t('LDKey_distributionApplyWithdrawAmountMin', {
              money: info.minWithdrawalAmount,
              percent: info.serviceCharge
            })
          }}
        </view>
      </view>
    </view>
    <view :class="disabled ? 'disabled' : ''" class="withdraw-contain-btn" @click="submitWithdraw">
      {{ t('LDKey_distributionApplyWithdrawConfirm') }}
    </view>
    <view class="withdraw-contain-tips">
      {{ t('LDKey_distributionApplyWithdrawTips', { day: info.afterDay }) }}
    </view>
  </view>
</template>

<style lang="scss" scoped>
.withdraw {
  &-contain {
    padding-top: 20rpx;
    padding-bottom: 50rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 50rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);

    &-balance {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 0 32rpx;
      height: 120rpx;
      line-height: 120rpx;
      display: flex;
      justify-content: space-between;

      text {
        font-weight: 400;
        font-size: 28rpx;
        color: #3d3d3d;

        &:last-child {
          font-weight: 500;
          color: #eb3114;
        }
      }
    }

    &-view {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 36rpx 32rpx;
      margin-top: 20rpx;

      &-title {
        font-weight: 400;
        font-size: 28rpx;
        color: #3d3d3d;
        line-height: 40rpx;
      }

      &-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 50rpx 0 24rpx;

        input {
          flex: 1;
          font-size: 28rpx;
          color: #3d3d3d;
          line-height: 40rpx;
          height: 40rpx;
          font-weight: 700;

          &.placeholder {
            font-weight: 400;
            color: #adaeb0;
          }
        }

        view {
          font-weight: 400;
          font-size: 28rpx;
          color: #269c74;
          line-height: 40rpx;
        }
      }

      &-bottom {
        border-top: 1px solid #f4f4f4;
        padding-top: 28rpx;

        view {
          &:first-child {
            font-weight: 400;
            font-size: 28rpx;
            color: #979797;
            line-height: 40rpx;

            text {
              color: #eb3114;
            }
          }

          &:last-child {
            margin-top: 10rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #adaeb0;
            line-height: 34rpx;
          }
        }
      }
    }

    &-btn {
      margin: 40rpx 32rpx 28rpx;
      line-height: 100rpx;
      text-align: center;
      background: #269c74;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      border-radius: 100rpx;

      &.disabled {
        background: #adaeb0;
      }
    }

    &-tips {
      font-weight: 400;
      font-size: 24rpx;
      color: #adaeb0;
      line-height: 34rpx;
      text-align: center;
    }
  }
}
</style>
